<template>
  <div class="container">
    <el-form :inline="true" :model="filterData" class="demo-form-inline search">
      <el-form-item>
        <el-button
          :disabled="!filterData.parentId"
          type="primary"
          @click="edit()"
        >
          新增字典值
        </el-button>
      </el-form-item>
    </el-form>
    <div class="table-contain">
      <Table
        height="100%"
        :columns="tableData.columns"
        v-loading="tableData.loading"
        :data="tableData.data"
      >
        <template #state="{ row }">
          {{ row.state == 1 ? "启用" : "禁用" }}
        </template>
        <template #edit="{ row }">
          <el-button
            size="small"
            :icon="Edit"
            type="warning"
            plain
            @click="edit(row)"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            :icon="Delete"
            type="danger"
            plain
            @click="del(row)"
          >
            删除
          </el-button>
        </template>
      </Table>
    </div>
    <DictEditForm
      v-model:visible="editFormVisible"
      v-model:data="rowData"
      type="2"
      @submit="getTableData"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import { deleteDict, selectDict, selectSysDictByParentId } from "@/api/system";
import Table from "@/components/pageTable/table";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit } from "@element-plus/icons-vue";
import DictEditForm from "@/views/systemManage/dictionary/components/DictEditForm.vue";
import { bus } from "@/util";

let rowData: any;
const editFormVisible = ref<boolean>(false);
let filterData = reactive({ name: "", code: "", parentId: "" });
const pageData = reactive({
  pageSize: 15,
  pageNum: 1,
});
const tableData = reactive({
  columns: [
    { prop: "state", label: "状态", width: 60, template: true },
    { prop: "name", label: "名称", width: 120 },
    { prop: "code", label: "字典值", width: 120 },
    { prop: "sort", label: "排序", width: 80 },
    { prop: "remark", label: "说明", width: 200 },
    { prop: "edit", label: "操作", width: 200, template: true, fixed: "right" },
  ],
  loading: false,
  total: 0,
  data: [],
});

async function getTableData() {
  const parentId = filterData?.parentId;
  tableData.loading = true;
  const { data, success, msg } = await selectSysDictByParentId(parentId);
  if (!success) {
    ElMessage.error(msg);
    return;
  }
  tableData.loading = false;
  tableData.data = data || [];
  tableData.total = data?.total || 0;
}

async function edit(row: any) {
  if (!row) {
    rowData = reactive({ parentId: filterData?.parentId });
    console.log(rowData);
    editFormVisible.value = true;
    return;
  }
  const { data, success } = await selectDict(row?.id);
  if (!success) {
    return;
  }
  rowData = reactive(data);
  editFormVisible.value = true;
}

async function del(row: any) {
  ElMessageBox.confirm(`是否删除?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    tableData.loading = true;
    const { success, msg } = await deleteDict(row?.id);
    if (!success) {
      tableData.loading = false;
      ElMessage.error(msg);
      return;
    }
    ElMessage.success("操作成功");
    await getTableData();
  });
}

watch(pageData, async () => {
  // await getTableData();
});

watch(filterData, async () => {
  pageData.pageNum = 1;
  await getTableData();
});

onMounted(async () => {
  bus.on(
    "searchDictValue",
    (dictId: string | any) => (filterData.parentId = dictId || null),
  );
});
</script>

<style scoped lang="scss">
@import "@/assets/styles/common";
</style>
